<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	
		<hx-navbar title="合成" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="container">
			<view class="chengpin_box">
				<view class="imgs" style="width: 100%;">
					<image v-for="(item,index) in info.items" :key="index" :src="item.item.image" mode="aspectFill"
						class="chengpin_img"></image>
				</view>
			</view>
			<view class="">
				<view class="shop-name">{{info.name}}</view>
				<view class="cell-item-cc">
					<view class="data">
						<view class="label">截止时间</view>
						<view class="num">{{info.endTime|filterTime}}</view>
					</view>
				</view>
			</view>
			<view class="compound_box1">
				<image src="/static/user/next_icon1.png" mode="widthFix" class="next_page"></image>
				<view class="text-center color-9">
					一共可合成{{info.items.length}}个商品
				</view>
				<view class="compound_box m-t-20" style="">
									
					<!-- <view class="compound_item" v-for="(item,index) in info.details">
						<image :src="item.item.image" mode="aspectFill" class="add_btn"></image>
					</view -->

					<view class="compound_item" :class="{has_choose:item.ownQuantity >=item.needQuantity}" v-for="(item,index) in info.details"
						:key="index">
						<image :src="item.item.image" mode="aspectFill" class="add_btn"></image>
						<view class="choosed-box">
							{{item.needQuantity}}/{{item.ownQuantity}}
						</view>
						<!-- <view class="key_status" v-if="item.key_status==1">
							不消耗
						</view> -->
					</view>

				</view>
			</view>


		</view>
		<view class="" style="height: 291rpx;"></view>
		<view class="bottom_box_">
			<view class="tips" :style="{'color':knormalColor}">随机合成以上任意商品</view>
			<view class="btn_btn skew" :style="{background:kbuttonBgColor}" @click="go_compound" v-if="enableCompound()">立即合成</view>
			<view class="btn_btn1 skew" v-else>立即合成</view>
		</view>
		<uni-popup ref="rewards" type="center" :isMaskClick="false">
			<view class="rewards_box">
				<view class="rewards_title">恭喜获得新商品</view>
				<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
				<image :src="openItem.image" mode="aspectFill" class="reward_img"></image>
				<view class="reward_name">
					{{openItem.name}}
				</view>
			</view>
			<view class="confirm_btn2 " @tap="confirm">确定</view>
		</uni-popup>
		<paypass ref="passbox" @confirm="set_done"></paypass>
	</view>
</template>

<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		components: {
			paypass
		},
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM')
			}
		},
		data() {
			return {
				id: '',
				info: [],
				//需要的材料
				list: [],

				my_list: [],
				//已选择的商品
				choosed: [],
				infos: {},
				openItem: {

				},
				ids: [],
				is_hecheng: 0,
				info_name: {},
				// 是否有合成子藏品
				allEnable:true
			}
		},
		onLoad(options) {
			this.id = options.id
			// this.material()
			this.getfurnacel()
			// this.getMaterialcount()

		},
		computed: {
			// can_compound: function() {
			// 	let can = false
			// 	for (var i = 0; i < this.list.length; i++) {
			// 		if (this.list[i].has_choose) {
			// 			can = true;
			// 			break
			// 		}
			// 	}
			// 	return can;
			// }
		},
		methods: {
			// 是否可以合成
			enableCompound(){
				if(parseInt(this.info.startTime)<new Date().getTime()
				&& parseInt(this.info.endTime)>new Date().getTime()
				&& this.info.items.length >0
				&& this.allEnable){
					return true
				}else{
					return false
				}
			},
			getMaterialcount() { //判断合成材料
				this.$api.materialcount({
					furnace_id: this.id
				}, res => {
					if (res.status) {
						this.ids = res.data.snlist
						this.is_hecheng = res.data.is_hecheng
					}
				})
			},
			getfurnacel() { //合成商品详情
				this.$api.furnacel(this.id, res => {
					if (res.status) {
						this.info = res.data;
						let list = this.info.details
						if(!list){list = []}
						list.forEach(item =>{
							if(item.ownQuantity <= 0){
								this.allEnable = false
							}
						})
					}
				})

			},
			material() { //查看商品需要的材料
				this.$api.material({
					furnace_id: this.id
				}, res => {
					if (res.status) {
						let list = res.data;
						for (var i = 0; i < list.length; i++) {
							list[i]['has_choose'] = false
						}
						this.list = list;
						console.log(this.list, "this.list")
					}
				})
			},

			go_mart: function() {
				uni.switchTab({
					url: '/pages/mart/mart'
				})
			},
			confirm() {
				this.$refs.rewards.close();
				this.material()
				this.getfurnacel()
				this.getMaterialcount()
			},
			go_compound: function() {
				uni.showModal({
					content: '确定要合成数字科技商品？',
					success: (r) => {
						if (r.confirm) {
							this.$api.checkSecondPassword({}, res => {
								if(res.status){
									let data = res.data
									if (data.secondPassword) {
										this.$refs.passbox.open();
									} else {
										this.$common.errorToShow('请设置交易密码', () => {
											uni.navigateTo({
												url: '/pages/user/settings/pay_pass/pay_pass'
											})
										});
									}
								}else{
									this.$common.errorToShow('网络异常');
								}
							})
						}
					}
				});
			},
			// 合成藏品
			set_done: function(pass) {
				let data = {
					mergeId: this.id,
					secondPassword:pass
				}
				this.$api.compound(data, res => {
					if (res.status) {
						this.$common.successToShow("合成成功")
						// this.openItem = res.data
						// this.$refs.rewards.open();
						// this.$common.successToShow(res.msg, () => {
						// 	uni.redirectTo({
						// 		url: '../../collection/collection'
						// 	})
				
						// })
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			},


		}
	}
</script>
<!-- <style lang="scss" scoped>
	@import url('/static/css/common.css');

</style> -->
<style lang="scss" scoped>
	.num_left {
		background: $text-zdy;
	}

	.num_right {
		border: solid 1rpx $text-zdy;
		color: $text-zdy ;
		background: none;
	}

	.btn_btn1 {
		background: #999 !important;
	}

	.btn_btn,
	.btn_btn1 {
		width: 100%;
		height: 80rpx;
		background: $btn-bg;
		border-radius: 100rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.tips {
		text-align: center;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 40rpx;
		position: relative;
	}

	.tips::after,
	.tips::before {
		display: block;
		clear: both;
		content: '';
		width: 105rpx;
		height: 2rpx;
		background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
		position: absolute;
		top: 50%;
		left: 44rpx;
		z-index: 10;
		transform: translateY(-50%);
	}

	.tips::before {
		background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
		left: auto;
		right: 44rpx;
	}

	.bottom_box_ {
		width: 100%;
		padding: 0 50rpx;
		position: fixed;
		left: 0;
		bottom: 50rpx;
		z-index: 11;
	}

	.chengpin_img {
		width: 325rpx;
		height: 325rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.shop-name {
		text-align: center;
		font-size: 32rpx;
		color: #000;
		font-weight: 400;
		margin: 45rpx 0 20rpx;
	}

	.data {
		display: flex;
		align-items: center;
		border-radius: 5rpx;
		overflow: hidden;

		.label {
			width: 110rpx;
			height: 40rpx;
			background-color: #863A3A;
			border-radius: 5rpx 0 0 5rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #fff;
			font-weight: 500;
		}

		.num {
			display: inline-block;
			min-width: 100rpx;
			height: 40rpx;
			background-color: #FFF0F2;
			padding: 0 15rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #000;
			font-weight: 500;
		}
	}

	.next_page {
		width: 75rpx;
		height: 75rpx;
		position: absolute;
		top: -45rpx;
		left: 303rpx;
		// animation: mymove .5s infinite;
	}

	@keyframes mymove {
		from {
			top: -45;
		}

		to {
			top: -50rpx;
		}
	}


	.chengpin_box {
		width: 100%;
		padding: 0 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.imgs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			image {
				margin: 20rpx auto 0;
			}

			&>image:nth-child(-n+2) {
				margin-top: 0;
			}
		}
	}

	.compound_item {
		width: 176rpx;
		height: 176rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		box-sizing: content-box;
		border: 2px solid rgba(2, 2, 2, 0);
		filter: grayscale(100%);
		position: relative;
		z-index: 10;
		// display: none;
	}

	.key_status {
		padding: 5rpx 10rpx;
		border-radius: 20rpx 0 20rpx 0;
		background: $btn-bg;
		font-size: 24rpx;
		color: #fff;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.choosed-box {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 30rpx;
		padding: 2rpx 10rpx;
		font-size: 24rpx;
		color: #fff;
		margin: auto;
	}

	.has_choose {
		filter: grayscale(0%);
	}

	.has_choose {
		display: flex;
	}

	.compound_box1 {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		padding-top: 60rpx;
		margin-top: 120rpx;
		position: relative;
	}

	.compound_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		z-index: 111;
		// min-height: 430rpx;


	}

	.compound_box::after {
		content: '';
		width: 176rpx;
	}

	.add_btn {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}

	.container {
		width: 100%;
		padding: 75rpx 25rpx 0;
		position: relative;
		z-index: 10;
	}
</style>